<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view>{{ number + 1 }}</view>
    <view>{{ ok ? 'YES' : 'NO' }}</view>
    <view>{{ message.split('').reverse().join('') }}</view>
    <view v-for="item in arr" :key="item.id" style="color: #ff0000;">
      {{ JSON.stringify(item) }}
    </view>
    <view v-for="(item, index) in 6" :key="index" style="color: #00ff00;">
      <view :class="'list-' + (index % 2)">{{ index + 2 }}</view>
    </view>
    <view v-for="(value, name, index) in object" :key="index">
      {{ index }}---{{ name }}---{{ value }}
    </view>
    <view v-for="item in arr" :key="item.id">
      <view style="color: #333300;">{{ item.id }}:{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      number: 1,
      ok: true,
      message: 'Hello Vue!',
      arr: [
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' },
        { id: 3, name: 'wechat' },
        { id: 4, name: 'Android' }
      ],
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    }
  }
}
</script>

<style>
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
.smalllogo {
  height: 50rpx;
  width: 50rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
</style>